import { useEffect, useState } from "react";
import axios from "../utils/http";
axios.defaults.baseURL = "http://localhost:3000/ybk/";
import { useNavigate } from "react-router-dom";
import { IconFont } from "tdesign-icons-react";
import { NavBar } from "react-vant";
import './ybk.css';
const App = () => {
  let Navigate = useNavigate();
  const [phone, setPhone] = useState("");
  const [password, setPassword] = useState("");
  const submit = () => {
    console.log(phone, password);
    const obj={
      rel:phone,
      password:password
    }
    axios.post("/login", obj).then((res) => {
      console.log(res.data.code);
      
      if (res.data.code == 200) {
        localStorage.setItem("accessToken", res.data.accessToken);
        localStorage.setItem("refreshToken", res.data.refreshToken);
        localStorage.setItem('user', JSON.stringify(res.data.data));
        alert("登录成功");
        Navigate("/index");
      } else {
        alert("用户名或者 密码错误");
      }
    });
  };
  const ored = () => {
    Navigate("/other");
  };
  const face = () => {
    Navigate("/face");
  };
  return (
    <div>
      <div
        style={{
          textAlign: "center",
          marginTop: "10rem",
          marginBottom: "10rem",
        }}
      >
        <div
          style={{
            width: "20rem",
            height: "20rem",
            lineHeight: "30rem",
            backgroundColor: "var(--item-bgc)",
            borderRadius: "50%",
            textAlign: "center",
            margin: "0 auto",
          }}
        >
          <img src="../public/img/sdd1.png" alt="" className="ljyimg" />
        </div>
      </div>
      <div className="ljydeng">
        {/* <NavBar onClickLeft={() => Navigate(-1)} /> */}
        <div className="ljyhe">
          手机号：
          <input
            type="text"
            placeholder="请输入手机号"
            onChange={(e) => {
              setPhone(e.target.value);
            }}
          />
        </div>
        <div className="ljyhe">
          密码：
          <input
            type="text"
            placeholder="请输入密码"
            onChange={(e) => {
              setPassword(e.target.value);
            }}
          />
        </div>
        <button className="ljydenga" onClick={submit}>
          登录
        </button>
      </div>
      <div className="ljyother">
        <div>
          <button className="ljyqi">其他方式登录</button>
        </div>
        <div className="ljybox">
          <div>
            <IconFont name="scan" onClick={face} />
          </div>
          <div onClick={() => Navigate("/code")}>
            <IconFont name="mobile" />
          </div>
        </div>
      </div>
    </div>
  );
};
export default App;
